<template>
  <view class="content">
    <view>
      <u-navbar :safeAreaInsetTop="false" title="任务管理" :fixed="false" left-text="返回首页" rightIconColor="#13D069"
                leftIconColor="#13D069" @leftClick="toIndex">
        <view slot="right">
          <u-icon name="coupon-fill" color="#13D069 " label="我的奖励" labelPos="right" labelColor="#13D069">
          </u-icon>

        </view>
      </u-navbar>
    </view>
    <u-subsection fontSize="21rpx" activeColor="#13D069" :list="list" :current="current2" @change="change2"
                  style="margin-top: 20rpx;">

    </u-subsection>
    <view class="u-demo-block">

      <view class="u-page__swipe-action-item">
        <u-swipe-action>
          <u-swipe-action-item :options="options2" v-for="(item, index) in indexList" :key="index">
            <view>
              <u-list-item>
                <u-cell>
                  <view slot="title">
                    <u-row customStyle="margin-bottom: 10px">
                      <u-col span="8">
                        <text class="celltext-o">艺术节活动开始招募志愿者了！
                        </text>

                      </u-col>
                    </u-row>
                    <text class="celltext-t">艺术节活动开始招募志愿者了！欢迎踊跃报名欢迎踊跃报名欢迎踊跃报名</text>
                  </view>
                  <view slot="value">
                    <u-button :customStyle="searchb" type="primary" size="mini" text="确定"
                              shape="circle"></u-button>
                  </view>
                </u-cell>
              </u-list-item>
            </view>
          </u-swipe-action-item>
        </u-swipe-action>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchb: {
        background: "#13D069",
        color: "white",
        borderRadius: "122rpx",
        width: "102rpx",
        height: "45rpx"
      },
      searchb2: {
        background: "#5A9BF9",
        color: "white",
        borderRadius: "18rpx",
        fontSize: "17rpx",
        width: "81rpx",
        height: "40rpx"
      },
      current2: 0,
      list: ['全部', '未完成', '已过期', '已完成'],
      // list: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}],
      indexList: [],
      indexList2: [],
      urls: [
        'https://cdn.uviewui.com/uview/album/1.jpg',
        'https://cdn.uviewui.com/uview/album/2.jpg',
        'https://cdn.uviewui.com/uview/album/3.jpg',
        'https://cdn.uviewui.com/uview/album/4.jpg',
        'https://cdn.uviewui.com/uview/album/5.jpg',
        'https://cdn.uviewui.com/uview/album/6.jpg',
        'https://cdn.uviewui.com/uview/album/7.jpg',
        'https://cdn.uviewui.com/uview/album/8.jpg',
        'https://cdn.uviewui.com/uview/album/9.jpg',
        'https://cdn.uviewui.com/uview/album/10.jpg',
      ],
      options2: [{
        text: '置顶',
        style: {
          backgroundColor: '#F3B143'
        }
      }, {
        text: '删除',
        style: {
          backgroundColor: '#f56c6c'
        }
      }],
      disabled: false,
      btnWidth: 180,
      show: false,

    }


  },
  methods: {
    toIndex() {
      uni.switchTab({
        url: '/pages/index/index'
      })
    },
    change2(index) {
      this.current2 = index
    },
    scrolltolower() {
      this.loadmore()
    },
    loadmore() {
      for (let i = 0; i < 30; i++) {
        this.indexList.push({
          url: this.urls[uni.$u.random(0, this.urls.length - 1)]
        })
      }
    },
    click(index, index1) {
      console.log(index, index1)
      if (index1 == 1) {
        this.list.splice(index, 1);
        this.$u.toast(`删除了第${index}个cell`);
      } else {
        this.list[index].show = false;
        this.$u.toast(`收藏成功`);
      }
    },
    // 如果打开一个的时候，不需要关闭其他，则无需实现本方法
    open(index) {
      // 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
      // 原本为'false'，再次设置为'false'会无效
      this.list[index].show = true;
      this.list.map((val, idx) => {
        if (index != idx) this.list[idx].show = false;
      })
    }

  },
  onLoad() {
    this.loadmore()
  },

}
</script>

<style lang="scss">
.celltext-o {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  font-size: 24rpx;
  color: #3D3D3D;
  font-weight: 600;
}

.celltext-p {
  color: #999999;
  font-size: 17rpx;
}

.celltext-t {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  font-size: 17rpx;
  color: #999999;
}

.item {
  display: flex;
  padding: 20rpx;
}

image {
  width: 120rpx;
  flex: 0 0 120rpx;
  height: 120rpx;
  margin-right: 20rpx;
  border-radius: 12rpx;
}

.title {
  text-align: left;
  font-size: 28rpx;
  color: $u-content-color;
  margin-top: 20rpx;
}

.content {

  margin: 0 20rpx;
  padding: 50rpx 0;
}

.search {
  flex: 1;
  border: 1px solid #13D069;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8.5rpx 0 22rpx;
  height: 50rpx;
  color: #999999;
  font-size: 28rpx;
  border-radius: 32rpx;

}

.fl {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 22rpx 0;
}

.sx {
  width: 50rpx;
  height: 60rpx;
}
</style>
